<template>
  <div class="ArticlePage">
    <div v-for="(items) in getDatas" :key="items.id">
        <Article :artDatas="items"></Article>
    </div>
    <div class="noMoreData">
        <span>没有更多内容了~</span>
    </div>
    <hr>
  </div>
</template>

<script>
import Article from '@/components/Article.vue';
import axios from "axios";
export default {
    name:'ArticlePage',
    components:{
        Article
    },
    data() {
        return {
            datas:[    
            {
                id:10085,
                title:'Vue学习经验分享',
                author:"浜辺星雲",
                iconURL:require("@/assets/Koube.jpg"),
                time:"2024-2-30",
                content:`Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。 `,
                likes:100,
                view:233
            },
            {
                id:10086,
                title:'明日方舟HS-11摆完挂机',
                author:"Shio",
                iconURL:require("@/assets/Shio.jpg"),
                time:"2024-2-13",
                content:"《明日方舟》是由鹰角网络自主开发运营的一款策略向即时战略塔防游戏，iOS和Android服务器分别于2019年4月30日和5月1日开启公测，该游戏适龄级别为12+。在游戏中，玩家将作为罗德岛的领导者“博士”，带领罗德岛的一众干员救助受难人群、处理矿石争端以及对抗诸如整合运动等其他势力。在错综复杂的势力博弈之中，寻找治愈矿石病的方法。",
                likes:114,
                view:514
            },
            {
                id:10087,
                title:'上单诺手与剑姬对线注意事项',
                author:"丁满",
                iconURL:require("@/assets/Sb.jpg"),
                time:"2024-7-7",
                content:"诺手的对线能力较强，但是对付一些技术高于自己都人用其他英雄比如奎因凯南潘森剑姬武器，则会有些劣势。文章从出装天赋和技巧三个方面对诺手rank进行详细解析，希望能给大家以一些启发。",
                likes:10000,
                view:2
            },
            {
                id:10088,
                title:'如何与Shio建立更深的羁绊',
                author:"浜辺星雲",
                iconURL:require("@/assets/Koube.jpg"),
                time:"2024-2-30",
                content:"我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 就我个人来说，shio对我的意义，不能不说非常重大。 生活中，若shio出现了，我们就不得不考虑它出现了的事实。 博曾经说过，一次失败，只是证明我们成功的决心还够坚强。 维这句话语虽然很短，但令我浮想联翩。 一般来讲，我们都必须务必慎重的考虑考虑。 每个人都不得不面对这些问题。 在面对这种问题时， 我们不得不面对一个非常尴尬的事实，那就是， 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 俾斯麦在不经意间这样说过，对于不屈不挠的人来说，没有失败这回事。这启发了我， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。",
                likes:100,
                view:233
            }
        ],
        getDatas:[]
    }
    },
    async created() {
        const res=await axios.get("https://mock.boxuegu.com/mock/3083/articles")   
        this.getDatas=res.data.result.rows
    },
}
</script>

<style scoped>
 .ArticlePage{
    overflow-x: scroll;
    scrollbar-width: none;
 }
 .noMoreData{
    margin-top: 30px;
    display: flex;
    justify-content: center;
 }
</style>